<template>
  <view class="product-detail-page">
    <!-- 商品图片 -->
    <view class="product-banner">
      <image :src="product.image" mode="aspectFill" class="product-image"></image>
      <view v-if="product.tag" class="product-tag">{{ product.tag }}</view>
    </view>

    <!-- 商品信息 -->
    <view class="product-info">
      <view class="product-header">
        <text class="product-title">{{ product.title }}</text>
        <view class="product-price">
          <text class="points-price">{{ product.points }}积分</text>
          <text class="original-price">¥{{ product.originalPrice }}</text>
        </view>
      </view>
      
      <view class="favorite-btn" @tap="toggleFavorite">
        <text class="favorite-icon">{{ isFavorite ? '❤️' : '🤍' }}</text>
        <text class="favorite-text">收藏</text>
      </view>
    </view>

    <!-- 使用说明 -->
    <view class="usage-info">
      <text class="usage-title">{{ product.title }}使用说明：</text>
      <text class="usage-content">{{ product.usage }}</text>
    </view>

    <!-- 兑换须知 -->
    <view class="exchange-notice">
      <view class="notice-title">积分兑换购物卡/充值卡/礼品卡须知：</view>
      
      <view class="notice-content">
        <view class="notice-item">
          <text class="notice-text">1、本产品为购物卡/充值卡/礼品卡转赠，卡券为电子卡券，暂无实物卡。</text>
        </view>
        
        <view class="notice-item">
          <text class="notice-text">2、【领取方式】兑换成功后，请扫下方微信二维码+客服，通过客服给您发送转赠链接。</text>
        </view>
        
        <view class="notice-item">
          <text class="notice-text">3、转赠链接/卡密等回现金，千万不要把转赠链接/卡密发送或截图给任何人！！！客服将转赠链接/卡密发送给您，既视为兑换成功，因延时领取或将链接截图转给他人，导致卡券没领取成功，积分一律不做退还，请谅解！</text>
        </view>
        
        <view class="notice-item">
          <text class="notice-text">4、如遇兑换订单较多或其他情况造成延时，请会员们多多包涵，谢谢！</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action">
      <text class="user-points">{{ userPoints }}积分</text>
      <button 
        class="exchange-btn"
        :class="{ 'btn-disabled': userPoints < product.points }"
        :disabled="userPoints < product.points"
        @tap="exchangeProduct"
      >
        立即兑换
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const product = ref({})
const userPoints = ref(1000)
const isFavorite = ref(false)

onLoad((options) => {
  const productId = options.id
  loadProductDetail(productId)
})

const loadProductDetail = (id) => {
  // 模拟从服务器获取商品详情
  product.value = {
    id: id,
    title: '30元霸王茶姬代金券',
    points: 1000,
    originalPrice: '30',
    image: '/static/images/chagee-detail.jpg',
    tag: '热门',
    usage: '1.仅限 霸王茶姬微信/支付宝/抖音 小程序使用，能否外送以官方显示为准，不可直接门店核销；2.未兑换前一般有效期6个月内，兑换后有效期90天，过期不退不换；3.可使用产品：除小料、周边、套餐、欧包外...'
  }
}

const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value
  
  uni.showToast({
    title: isFavorite.value ? '已收藏' : '取消收藏',
    icon: 'success'
  })
}

const exchangeProduct = () => {
  if (userPoints.value < product.value.points) {
    uni.showToast({
      title: '积分不足',
      icon: 'none'
    })
    return
  }

  uni.showModal({
    title: '确认兑换',
    content: `确定要使用${product.value.points}积分兑换${product.value.title}吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '兑换中...'
        })
        
        setTimeout(() => {
          uni.hideLoading()
          userPoints.value -= product.value.points
          
          uni.showToast({
            title: '兑换成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/orders/orders?type=mall'
            })
          }, 1500)
        }, 2000)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.product-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.product-banner {
  position: relative;
  height: 500rpx;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-tag {
  position: absolute;
  top: 32rpx;
  left: 32rpx;
  background: rgba(139, 195, 74, 0.9);
  color: white;
  font-size: 24rpx;
  padding: 12rpx 24rpx;
  border-radius: 24rpx;
  backdrop-filter: blur(10rpx);
}

.product-info {
  background: white;
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.product-header {
  flex: 1;
}

.product-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  margin-bottom: 16rpx;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.points-price {
  font-size: 32rpx;
  color: #8BC34A;
  font-weight: 600;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.favorite-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx;
  transition: all 0.3s ease;
}

.favorite-btn:active {
  transform: scale(0.95);
}

.favorite-icon {
  font-size: 32rpx;
  margin-bottom: 8rpx;
}

.favorite-text {
  font-size: 20rpx;
  color: #666;
}

.usage-info {
  background: white;
  margin-top: 16rpx;
  padding: 32rpx;
}

.usage-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 16rpx;
  display: block;
}

.usage-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.exchange-notice {
  background: #8BC34A;
  margin-top: 16rpx;
  padding: 32rpx;
  color: white;
}

.notice-title {
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  display: block;
}

.notice-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.notice-item {
  display: flex;
  align-items: flex-start;
}

.notice-text {
  font-size: 24rpx;
  line-height: 1.6;
  opacity: 0.95;
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 24rpx 32rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-points {
  font-size: 28rpx;
  color: #8BC34A;
  font-weight: 600;
}

.exchange-btn {
  background: linear-gradient(135deg, #8BC34A 0%, #7CB342 100%);
  color: white;
  border: none;
  border-radius: 50rpx;
  padding: 24rpx 48rpx;
  font-size: 28rpx;
  font-weight: 600;
  box-shadow: 0 8rpx 24rpx rgba(139, 195, 74, 0.3);
  transition: all 0.3s ease;
}

.exchange-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(139, 195, 74, 0.3);
}

.btn-disabled {
  background: #ccc !important;
  box-shadow: none !important;
}
</style>